<template>
    <div>
        <div class="content package-detail" v-loading="loading">
            <breadcrumb :title="'脚本编辑说明'"></breadcrumb>
            <div class="explain">
                <div class="li"><span class="num">1、</span>需要脚本情形：非规范接口、需对出参进行额外加工处理。</div>
                <div class="li">
                    <span class="num">2、</span>
                    <div>
                        脚本编写规范：<br>
                        入参：后台会将参数放入paramMap中传给脚本文件，所有入参请从paramMap中获取。<br>
                        出参：返回以下格式的json字符串，code为0表示正常，-1或其他表示异常；success为成功标识，取值true或false，msg为返回说明，data为jsonArray格式的业务数据，可为null,或。<br>
                        ("code ": 0,success: true, "msg:" "ok"data: (t'key'vale'))<br>
                        http请求：若脚本中需要发送http请求，请使用工具类com.sdy.dcsb.web.util.Http4ScriptUtil。<br>
                        脚本函数：脚本所有代码请放到函数中，函数返回值为处理后的接口返回数据。
                    </div>
                </div>
            </div>
            <breadcrumb :title="'脚本基本信息'" class="mt20"></breadcrumb>
            <el-row :gutter="20" v-if="!isEdit">
                <el-col :span="11">
                    <div class="grid-content bg-purple sysMsg">
                        <span class="sysTitle">脚本名称：</span>
                        <el-tooltip class="item" effect="dark"
                                    :content="detail.name" placement="top-start">
                            <span class="serviceContent">{{detail.name}}</span>
                        </el-tooltip>
                    </div>
                </el-col>
                <el-col :span="11" :offset="1">
                    <div class="grid-content bg-purple sysMsg">
                        <span class="sysTitle">脚本函数：</span>
                        <span class="serviceContent">{{detail.funcName}}</span>
                    </div>
                </el-col>
            </el-row>
            <el-form ref="infoForm" :model="infoForm" :rules="infoFormRules"
                     :label-position="'left'" label-width="1.3rem" v-if="isEdit">
                <el-row :gutter="20">
                    <el-col :span="10">
                        <el-form-item label="脚本名称：" prop="name">
                            <el-input v-model="infoForm.name" maxlength="50"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" :offset="2">
                        <el-form-item label="脚本函数：" prop="funcName">
                            <el-input v-model="infoForm.funcName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-row :gutter="20">
                <el-col :span="23">
                    <div class="grid-content bg-purple clearfix">
                        <span class="sysTitle">关联接口：</span>
                        <span class="serviceContent">{{detail.servname}}</span>
                    </div>
                </el-col>
            </el-row>
            <breadcrumb :title="'脚本内容'" class="mt20"></breadcrumb>
            <div class="editor" v-loading="!editorShow"
                 element-loading-text="重新渲染中">
                <prism-editor v-model="code" language="js" :lineNumbers="true"
                              :readonly="!isEdit" v-if="editorShow"></prism-editor>
            </div>
            <div class="btns mt30">
                <el-button plain v-if="!isEdit" @click="backFrom">返回</el-button>
                <el-button plain v-show="isEdit" @click="cancelEdit">取消</el-button>
                <el-button type="primary" v-show="!isEdit" @click="changeEdit">编辑</el-button>
                <el-button type="primary" v-show="isEdit" @click="save">保存</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import breadcrumb from '../../components/breadcrumb'

    export default {
        data() {
            let nameValidate = (rule, value, callback) => {
                    if (!/^[\u4E00-\u9FA5A-Za-z0-9]+$/.test(value)) {
                        return callback(new Error('只能出现数字或者字母或者中文'))
                    } else {
                        callback()
                    }
                },
                funcNameValidate = (rule, value, callback) => {
                    if (!/^[A-Za-z]+$/.test(value)) {
                        return callback(new Error('只能出现字母'))
                    } else {
                        callback()
                    }
                }
            return {
                infoForm: {
                    name: '', // 接口名称
                    funcName: '' // 接口编码
                },
                infoFormRules: {
                    name: [
                        {required: true, message: '请输入脚本名称', trigger: 'blur'},
                        {validator: nameValidate}
                    ],
                    funcName: [
                        {required: true, message: '请输入脚本函数', trigger: 'blur'},
                        {validator: funcNameValidate}
                    ]
                },
                code: '',
                id: '', // 脚本id
                detail: {
                    content: '',
                    name: '',
                    funcName: '',
                    servname: ''
                }, // 脚本详情
                editorShow: true, // 编辑器是否显示，默认显示
                isEdit: false, // 是否是编辑状态
                loading: false,
                from: '', // 上个页面来源
                resizeLoad: null // 窗口改变重新加载
            }
        },
        mounted() {
            let _this = this
            if (this.$route.query.id) {
                this.id = this.$route.query.id
                this.getDetail()
            } else {
                this.isEdit = true
            }
            window.$vm.$on('windowResize', () => {
                _this.editorShow = false
                if (_this.resizeLoad) clearTimeout(_this.resizeLoad)
                _this.resizeLoad = setTimeout(() => {
                    _this.editorShow = true
                }, 500)
            })
        },
        updated() {

        },
        methods: {
            getDetail() {
                this.$http.get('/EsbScript/getDetail', {
                    id: this.id
                }).then(result => {
                    if (result.success) {
                        this.detail = result.data
                        this.code = result.data.content
                    }
                })
            },
            changeEdit() {
                this.code = this.detail.content
                this.infoForm = {...this.detail}
                this.isEdit = true
            },
            cancelEdit() {
                this.code = this.detail.content
                this.isEdit = false
            },
            save() {
                this.validate('infoForm', () => {
                    this.loading = true
                    this.$http.post('/EsbScript/save', {
                        content: this.code,
                        funcName: this.infoForm.funcName,
                        name: this.infoForm.name,
                        id: this.detail.id
                    }).then(result => {
                        if (result.success) {
                            // this.detail = {...this.infoForm}
                            // this.detail.content = this.code
                            this.$message({
                                type: 'success',
                                message: '保存成功!'
                            })
                            this.detail = {...result.data}
                            this.isEdit = false
                        }
                        this.loading = false
                    }).catch(() => {
                        this.loading = false
                    })
                })
            },
            validate(formName, callback) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        return false
                    }
                })
            },
            backFrom() {
                if (this.from === '/scriptPackage') {
                    history.back()
                } else {
                    this.$router.push('/scriptPackage')
                }
            }
        },
        components: {
            breadcrumb
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                vm.from = from.path
            })
        }
    }
</script>

<style scoped lang="less">
    .package-detail {
        padding: .3rem;
        background-color: #fff;
    }

    .explain {
        font-size: .16rem;

        .li {
            line-height: .3rem;

            span {
                float: left;
                width: .24rem;
            }

            div {
                margin-left: .24rem;
            }
        }
    }

    .grid-content {
        font-size: .16rem;
        margin-right: .5rem;
    }

    /deep/ .editor {
        height: 3rem;
        font-size: .16rem;

        .prism-editor__line-numbers {
            font-size: .16rem !important;
            line-height: 1.5 !important;
            padding-top: 1em !important;
        }

        pre[class*="language-"] {
            overflow: visible;
        }
    }
</style>
